<template>
  <div>
    <div class="titletopXX">
      <van-nav-bar
      size="30"
      :title="title"
      left-arrow
      right-text=""
      :fixed="true"
      @click-left="onClickLeft"
    />
    </div>
    <div class="content">
      <van-notice-bar
        color="#00BAAD"
        background="rgba(0,186,173,0.14)"
        left-icon="info-o"
        text="温馨提示：每个账号最多添加三名出行人员"
      />
      <van-form @submit="onSubmit">
        <van-cell-group>
          <van-field
            label-width="120px"
            label="姓名"
            v-model="formData.employeeName"
            name="employeeName"
            placeholder="请填写姓名"
            required
            :rules="[{ required: true, message: '请填写姓名' }]"
          />
          <van-field
            label-width="120px"
            label="性别"
            is-link
            readonly
            v-model="formData.gender"
            name="gender"
            placeholder="请选择性别"
            @click="showPicker('gender')"
            required
            :rules="[{ required: true, message: '请选择性别' }]"
          />
          <van-field
            label-width="120px"
            label="身份证号"
            v-model="formData.idCard"
            name="idCard"
            placeholder="请填写身份证号"
            required
            :rules="[{ required: true, message: '请填写身份证号' }]"
          />
          <van-field
            label-width="120px"
            label="联系方式"
            v-model="formData.contactInfo"
            name="contactInfo"
            placeholder="请填写联系方式"
            required
            :rules="[{ required: true, message: '请填写联系方式' }]"
          />
          <van-field
            label-width="120px"
            label="关系"
            is-link
            readonly
            v-model="formData.relationship"
            name="relationship"
            placeholder="请选择关系"
            @click="showPicker('relationship')"
            required
            :rules="[{ required: true, message: '请选择关系' }]"
          />
        </van-cell-group>
        <div class="submit-btn">
          <van-button color="#36c2a8" square plain type="primary" @click="onClickLeft"
            >取消</van-button>
          <van-button color="#36c2a8" square type="primary" native-type="submit"
            >提交</van-button>
        </div>
      </van-form>
    </div>
    <van-popup v-model="show" position="bottom">
      <van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="show = false" />
    </van-popup>
  </div>
</template>

<script>
import { Toast } from "vant"
import { updateConvalesceEntourage } from "@/api/realAssets/icsharedstation/LYDJ/index.js"
import { getpersonalInformation } from "../../common/RYXX"

export default {
 data() {
  return {
    title: "出行人信息",
    show: false,
    columns: [],
    genderList:['男', '女'],
    relationList:['亲友', '本人'],
    formData: {
      employeeName: "", // 员工姓名
      gender: "", // 姓别
      idCard: "", // 身份证
      contactInfo: "", // 联系方式
      relationship: "" // 关系
    }
  }
},
methods: {
   onSubmit ()  {
  this.formData.userId =JSON.parse(getpersonalInformation()).userId
  updateConvalesceEntourage(this.formData)
    .then((res) => {
      if (res.resultMessage === "SUCCESS") {
        Toast.success("提交成功")
        this.$router.push({
          name: "rvicsharedstation-LYDJ_CYCXRusually"
        })
      }else{
        Toast.fail(res.data)
      }
    })
    .catch((err) => {
      Toast.fail("提交失败")
    })
},
 onClickLeft () {
  this.$router.push({
    name: "rvicsharedstation-LYDJ_CYCXRusually"
  })
},
 showPicker (value) {
  this.type = value
  if (this.type === 'gender') {
    this.columns = this.genderList
  } else if (this.type === 'relationship') {
    this.columns = this.relationList
  }
  this.show = true
},
 onConfirm  (value) {
  if (this.type === 'gender') {
    this.formData.gender = value
  } else if (this.type === 'relationship') {
    this.formData.relationship = value
  }
  this.show = false
}
  },
  mounted() {
    if (JSON.parse(decodeURIComponent(this.$route.query.CYCXR))) {
    this.formData = JSON.parse(decodeURIComponent(this.$route.query.CYCXR))
    this.formData.id && (this.title = "编辑出行人")
  }
  }
}

</script>

<style lang="less" scoped>
.content {
  background-color: #f8fbff;
  min-height: 85vh;
}
.submit-btn {
  padding: 10px 20px;
  display: flex;
  justify-content: space-around;
  button{
    width: 45%;
  }
}
.van-field {
  height: 60px;
}
.van-field__error-message {
  height: 20px; /* 固定高度 */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.titletopXX{
  height: 45px;
}
</style>
